import React, { Component } from 'react';
import service from '../../api'
import './Searchpros.scss'
import { withRouter } from 'react-router-dom';
import { InfiniteScroll, DotLoading, Ellipsis, Toast } from 'antd-mobile'
class Searchpros extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            count: 1,
            searchpros: [],
            hasMore: true
        }
    }
    async componentDidMount() {
        // console.log(this.props.keyword)
        var keyword = this.props.keyword
        await service.pro.getSearch({ count: this.state.count, limitNum: 10, keyword }).then(res => {
            // console.log(res);
            this.props.isShow(res.data.code !== '200')
            if (res.data.code === '200') {
                this.setState({
                    searchpros: res.data.data
                })
            }
            else {
                Toast.show({
                    content: res.data.message
                })
            }

        })
    }
    async loadMore() {
        var keyword = this.props.keyword
        let res = await service.pro.getSearch({ count: this.state.count + 1, limitNum: 10, keyword })
        // console.log(res.data.code);
        if (res.data.code !== '200') {
            this.setState({
                hasMore: false
            })
        }
        else {
            var count = this.state.count + 1
            this.setState({
                count,
                hasMore: true,
                searchpros: [...this.state.searchpros, ...res.data.data]
            })
        }
    }
    toDetails(proid: string) {
        this.props.history.push("/details/" + proid)
    }

    render() {
        return (
            <>
                <div className='searchpros'>
                    {
                        this.state.searchpros.map((item: any, index: number) => {
                            return (
                                <div className="searchpro" key={index} onClick={() => { this.toDetails(item.proid) }}>
                                    <img src={item.img1} alt="" />
                                    <div className='pror'>
                                        <Ellipsis direction='end' rows={2} content={item.proname} />
                                        <span>￥<strong>{Math.ceil(item.originprice * item.discount / 10)}</strong></span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <InfiniteScroll threshold={100} loadMore={async () => { await this.loadMore() }} hasMore={this.state.hasMore}>
                    {
                        <>
                            {this.state.hasMore ? (
                                <>
                                    <span>Loading</span>
                                    <DotLoading />
                                </>
                            ) : (
                                <span>--- 我是有底线的 ---</span>
                            )}
                        </>
                    }
                </InfiniteScroll>
            </>


        );
    }
}
export default withRouter(Searchpros);
